<template>
	<view>
		<view v-if="!success && !err" class="fui-wrap" :style="confirm_plate_number?'':`background-image:url(${baseUrl}assets/img/parkbg.jpg);background-size:cover;`">
			<block v-if="confirm_plate_number">
				<fui-nav-bar background="rgba(0,0,0,0)" size="14" title="确认车牌号" splitLine></fui-nav-bar>
				<view class="plate" >
					<plateNumber ref="plateNumber" :value="confirm_plate_number" @confirm="confirmPlate" @cancel="cancelPlate"></plateNumber>
				</view>
			</block>
			<fui-nav-bar v-if="records" background="rgba(0,0,0,0)" size="18" title="订单缴费" splitLine></fui-nav-bar>
			<view class="records" v-if="records">
				<view class="ad-box">
					<yunqiad/>
				</view>
				<view style="display: flex;margin-top: 30rpx;align-items: center;padding-left: 14rpx;">
					<fui-text text="请在" color="#909090" :size="28" block></fui-text>
					<fui-text :text="cutdown" color="#e17d18" :size="28" block style="margin: 0 8rpx;"></fui-text>
					<fui-text text="秒内完成支付" color="#909090" :size="28" block></fui-text>
				</view>
				<view class="detail-box">
					<fui-section title="停车详情" isLine :size="32" :padding="['40rpx','0rpx']"></fui-section>
					<view class="line">
						<view class="left">
							<fui-text text="车场名称" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="records.parking.title" color="#000" :size="28" block></fui-text>
					</view>
					<view class="line">
						<view class="left">
							<fui-text text="车牌号码" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="records.plate_number" color="#000" :size="28" block></fui-text>
					</view>
					<view class="line">
						<view class="left">
							<fui-text text="入场时间" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="records.entry_time_txt" color="#000" :size="28" block></fui-text>
					</view>
					<view class="line" v-if="records.entry_photo">
						<view class="left">
							<fui-text text="入场图片" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text text="查看图片" color="#43afe8" :size="28" block @click="showEntryPhoto"></fui-text>
					</view>
					<view class="line">
						<view class="left">
							<fui-text text="停车时长" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="formatDuration(records)" color="#000" :size="28" block></fui-text>
					</view>
					<view class="line">
						<view class="left">
							<fui-text text="收费规则" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text text="查看规则" color="#43afe8" :size="28" block @click="showRulesTxt"></fui-text>
					</view>
					<view class="line" v-if="records.activities_fee>0">
						<view class="left">
							<fui-text text="优惠金额" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="parseNumber(records.activities_fee)+'元'" color="#000" :size="28" block></fui-text>
					</view>
					<view class="line">
						<view class="left">
							<fui-text text="合计费用" color="#aaaaaa" :size="28" block></fui-text>
						</view>
						<fui-text :text="parseNumber(records.pay_price)+'元'" color="#e8980c" :size="38" block fontWeight="800"></fui-text>
					</view>
					<view class="line">
						 <fui-alert :title="`如有疑问，请联系停车场管理员，联系电话：${records.parking.phone}`" type="warn"></fui-alert>
					</view>
					<view style="margin: 30rpx 0;">
						<fui-button text="立即支付" :size="28"  height="80rpx" :disabled="disabledButton || cutdown<=0 || records.pay_price<=0" @click="payNow"></fui-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="err" style="padding-top: 220rpx;">
			<fui-result type="fail" title="操作失败" :descr="err">
				<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
			</fui-result>
		</view>
		<view v-if="success" style="padding-top: 220rpx;">
			<fui-result type="success" title="操作成功" :descr="success">
				<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
			</fui-result>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {parseNumber,formatDuration} from '@/utils/util.js'
	import platetype from '@/components/common/platetype.vue';
	import yunqiad from '@/components/common/ad.vue';
	import plateNumber from '@/components/common/plate.vue';
	export default {
		components:{
			platetype:platetype,
			plateNumber:plateNumber,
			yunqiad:yunqiad
		},
		data() {
			return {
				err:'',
				success:'',
				baseUrl:baseUrl,
				confirm_plate_number:'',
				serialno:'',
				records:'',
				disabledButton:false,
				cutdown:120,
				platform:''
			}
		},
		onLoad(e) {
			this.$platform();
			this.serialno=e.serialno || '';
			if(this.serialno){
				this.checkBarrier();
			}
			if(e.records_id){
				this.$get('index/records',{records_id:e.records_id},true).then(res=>{
					if(res.length===1){
						this.records=res[0];
					}
					if(res.length===0){
						this.err='没有找到入场记录';
					}
					this.cutdownMinus();
				});
			}
		},
		methods: {
			...methods,
			parseNumber,
			checkBarrier:function(){
				this.$get('index/serialno',{serialno:this.serialno},true).then(res=>{
					let {type,records,plate_number}=res;
					if(type=='records'){
						this.records=records;
						this.cutdownMinus();
					}
					//临牌车
					if(type=='plate_number'){
						this.confirm_plate_number=plate_number;
					}
				}).catch(err=>{
					this.err=err.msg;
				});
			},
			payNow:function(){
				let that=this;
				this.disabledButton=true;
				let pay_type;
				if(that.platform=='MP-WEIXIN'){
					pay_type='wechat-miniapp';
				}
				if(that.platform=='MP-ALIPAY'){
					pay_type='mp-alipay';
				}
				if(!pay_type){
					this.$msg('请使用微信或支付宝扫码');
					return;
				}
				this.$post('index/parking-pay',{records_id:this.records.id,records_pay_id:this.records.records_pay_id,pay_type:pay_type},true).then(res=>{
					uni.requestPayment({
						...res.payInfo,
						success:function(){
							that.$msg('支付成功');
							setTimeout(()=>{
								that.$redirectTo('index/orderdetail?out_trade_no='+res.orderId+'&serialno='+that.serialno);
							},1500);
						},
						fail:function(e){
							console.log(e)
							that.disabledButton=false;
							that.$msg('支付失败');
						}
					});
				}).catch(err=>{
					that.disabledButton=false;
					this.err=err.msg;
				});
			},
			showRulesTxt:function(){
				uni.showModal({
					title:'停车收费规则',
					content:this.records.parking.rules_txt,
					showCancel:false
				});
			},
			showEntryPhoto:function(){
				uni.previewImage({
					urls:[this.records.entry_photo]
				});
			},
			cutdownMinus:function(){
				this.cutdown--;
				if(this.cutdown>0){
					setTimeout(()=>{
						this.cutdownMinus();
					},1000);
				}
			},
			formatDuration:function(item){
				let s=item.exit_time-item.entry_time;
				return formatDuration(s,'minutes');
			},
			checkRecords:function(records){
				this.recordslist=[];
				this.records=records;
			},
			confirmPlate:function(plate_number){
				this.$get('index/exit',{
					plate_number:plate_number,
					serialno:this.serialno
				},true).then(res=>{
					this.confirm_plate_number='';
					//直接开闸
					if(res){
						this.success='开闸成功，本次停车免费';
					}else{
						this.checkBarrier();
					}
				}).catch(err=>{
					this.confirm_plate_number='';
					this.err=err.msg;
				});
			},
			cancelPlate:function(){
				this.$reLaunch('index/index');
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	padding:0 20rpx;
}
.item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.ad-box{
	width: 98%;
	margin: 30rpx auto;
	background-color: #fff;
	border-radius: 8rpx;
}
.line{
	display: flex;
	flex-direction: column;
	.park{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
}
.notice{
	margin-top: 20rpx;
	padding: 0 20rpx;
	background-color: #fff;
}
.records{
	min-height: 500rpx;
	overflow-y: scroll;
	.detail-box{
		width: 92%;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 20rpx;
		padding-top: 0;
		.line{
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			align-items: center;
			.left{
				width: 120rpx;
				display: flex;
				justify-content: flex-end;
				margin-right: 50rpx;
			}
		}
	}
}
</style>